<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/my/order.css" />
	</head>

	<body>
		<div id="order" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">我的订单</h1>
			</header>
			<div class="ordernav">
				<div v-for="(ordernav,index) in ordernav" :class="{checked : index == orderCheck}" @tap="ordernavCheck(index)">{{ordernav.text}}</div>
				<span class="transition"></span>
				<!--<div>已取消</div>-->
			</div>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="title" v-show="list.length>0">常购清单</div>
					<div class="order_main" v-for="(list,index) in list">
						<div class="order_list">
							<div class="list_data">
								<div class="list_head">
									<div>订单{{index+1}}</div>
									<div v-if="list.status==1">等待付款</div>
									<div v-else-if="list.status==2">
										<span v-if="list.refundState ==0">等待发货</span>
										<span v-else-if="list.refundState ==1">处理中</span>
										<span v-else="list.refundState ==2">处理完成</span>
									</div>
									<div v-else-if="list.status==3">等待收货</div>
									<div v-else-if="list.status==4">已完成</div>
									<div v-else style="color:#666;">已取消</div>
								</div>
								<div class="list_shop" @tap="openOrderDetail(list)">
									<div class="mui-scroll-wrapper muiScrollx">
										<div class="mui-scroll" :style="{width: (list.subOrderItemDtos.length*80+12) + 'px'}">
											<div class="list_content">
												<div v-for="itemDtos in list.subOrderItemDtos" :style="{backgroundImage : 'url('+ imgCommonUrl + itemDtos.pic + ')'}">

												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="statistics">
									<div>共{{list.productNums}}种商品</div>
									<div v-show="list.status==1">需付款 ：￥{{list.actualTotal}}</div>
								</div>
							</div>
							<!--待付款-->
							<div class="shop_operation" v-if="list.status==1">
								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap="payment(list)">去付款</button>
							</div>

							<!--待发货-->
							<div class="shop_operation" v-else-if="list.status==2">
								<button type="button" class="mui-btn" @tap="returnGoods(list)" v-show="list.refundState ==0">申请退款</button>
							</div>
							<!--待收货-->
							<div class="shop_operation" v-else-if="list.status==3">
								<!--<button type="button" class="mui-btn">查看物流</button>-->
								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap="collectGoods(list,index)">确定收货</button>
							</div>
							<!--取消-->
							<div class="shop_operation" v-else-if="list.status==5">
								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap='opDetails(list)'>再次购买</button>
							</div>
							<!--订单完成-->
							<div class="shop_operation" v-else>
								<button type="button" class="mui-btn" @tap="goComment(list)">去评论</button>
								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap='opDetails(list)'>再次购买</button>
							</div>
						</div>
					</div>
					<div></div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/my/order.js"></script>
	</body>

</html>